<template>
  <div class="app-container">
    <div v-loading="loading" class="container">
      <!--工具栏-->
      <div>
        <el-card class="box-card">
          <div slot="header" class="text item">
            <span>升级成为推广员规则</span>
          </div>
          <el-form :model="retail" :label-position="labelPosition.left" class="form-container" label-width="130px" >
            <el-form-item label="升级标准:">
              <el-radio-group v-model="retail.upgrade_standard" size="small">
                <el-radio label="0">满足其中一个条件即可</el-radio>
                <el-radio label="1">同时满足</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="满足下级会员:">
              <el-input v-model="retail.satisfy_next_member" size="small" style="width: 90px;" /> 人
            </el-form-item>
            <!--<el-form-item label="满足下级消费会员:">
              <el-input v-model="retail.satisfy_next_consumption_member" size="small" style="width: 90px;" /> 人
            </el-form-item>-->
            <!--<el-form-item label="满足佣金总额:">
              <el-input v-model="retail.satisfy_total_commission" size="small" style="width: 90px;" /> 元
            </el-form-item>-->
            <!--<el-form-item label="满足销售业绩:">
              <el-input v-model="retail.satisfy_sale" size="small" style="width: 90px;" /> 元
            </el-form-item>-->
            <!--<el-form-item label="满足完成订单数:">
              <el-input v-model="retail.satisfy_order_nums" size="small" style="width: 90px;" /> 单
            </el-form-item>-->
            <!--<el-form-item label="满足商城消费金额:">
              <el-input v-model="retail.satisfy_consumption_amount" size="small" style="width: 90px;" /> 元
            </el-form-item>-->
            <el-form-item label="购买指定宝贝:">
              <template>
                <el-select v-model="retail.appoint_type" placeholder="请选择指定专区的商品">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
              </template>
              <el-button type="primary" size="mini">
                <el-link :href="jumpDress" :underline="isUnderline" target="_blank" style="color:#ffffff;font-size: 12px;">专区商品编辑</el-link>
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
        <!--<el-card class="box-card">
          <div slot="header" class="text item">
            <span>佣金设置</span>
          </div>
          <el-form :model="form" :label-position="labelPosition.left" class="form-container" label-width="120px" >
            <el-form-item label="佣金总额:">
              <el-form-item
                v-for="(domain, index) in form.domains"
                :label="''"
                :key="domain.key"
                :prop="'domains.' + index + '.value'">
                当利润比≥ <el-input v-model="domain.profit_percent" size="small" style="width: 80px;"/> 宝贝价销售价的
                <el-input v-model="domain.total_commission" size="small" style="width: 80px;"/> %作为佣金总额
                <a v-if="index === 0" style="color: #409EFF" @click="addDomain">+新增条件</a>
                <i v-if="index !== 0" class="el-icon-circle-close" @click.prevent="removeDomain(domain)"/>
              </el-form-item>
            </el-form-item>
            <el-form-item label="消费收益比例:">
              宝贝佣金总额的 <el-input v-model="retail.consumption_percent" size="small" style="width: 80px;" /> %作为自买返利
            </el-form-item>
            <el-form-item label="推广收益比例:">
              宝贝佣金总额的 <el-input v-model="retail.generalize_percent" size="small" style="width: 80px;" /> %作为推广会员返利
            </el-form-item>
            <el-form-item label="推广提成比例:">
              下级推广会员销售额的 <el-input v-model="retail.percentage_percent" size="small" style="width: 80px;" /> %作为上级推广会员返利
            </el-form-item>
          </el-form>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="text item">
            <span>结算设置</span>
          </div>
          <el-form :model="retail" :label-position="labelPosition.left" class="form-container" label-width="100px" >
            <el-form-item label="订单签收：">
              <el-input v-model="retail.order_sign_time" size="small" style="width: 100px;" /> 天后自动结算
            </el-form-item>
          </el-form>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="text item">
            <span>佣金提现设置</span>
          </div>
          <el-form :model="retail" :label-position="labelPosition.left" class="form-container" label-width="100px" >
            <el-form-item label="提现金额满:">
              <el-input v-model="retail.receipt_limit" size="small" style="width: 100px;" /> 元，可以提现
            </el-form-item>
          </el-form>
        </el-card>-->
      </div>
      <div class="fixed-bottom">
        <el-button
          type="primary"
          size="small"
          @click="updata">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'
import { getToken, getCompanyId } from '@/utils/auth.js'
import { updateRetail, getDistribute } from '@/api/mall/retail'
export default {
  props: {
  },
  data() {
    return {
      loading: false,
      retail: {},
      options: [
        {
          value: '0',
          label: '无'
        }, {
          value: '1',
          label: '会员专享'
        }, {
          value: '4',
          label: '分销商品'
        }, {
          value: '6',
          label: '全部专区'
        }],
      isUnderline: false,
      jumpDress: '',
      form: {
        domains: [{
          profit_percent: '',
          total_commission: ''
        }]
      },
      labelPosition: {
        right: 'right',
        left: 'left'
      }
    }
  },
  created() {
    this.$nextTick(() => {
      this.getDistribute()
    })
  },
  mounted() {
    this.jumpDress = process.env.MARKET_URL + 'marketcenter/marketgameplay/specialzone?token=' + getToken() + '&company_id=' + getCompanyId()
  },
  methods: {
    parseTime,
    beforeInit() {
    },
    addDomain() {
      this.form.domains.push({
        value: '',
        key: Date.now()
      })
    },
    removeDomain(item) {
      var index = this.form.domains.indexOf(item)
      if (index !== -1) {
        this.form.domains.splice(index, 1)
      }
    },
    updata() {
      if (this.form.domains) {
        this.retail.commission = JSON.stringify(this.form.domains)
      }
      updateRetail(this.retail).then(res => {
        if (res === true) {
          this.$notify({
            title: '保存成功',
            type: 'success',
            duration: 2500
          })
        } else {
          this.$notify({
            title: '保存失败',
            type: 'error',
            duration: 2500
          })
        }
      })
    },
    getDistribute() {
      this.loading = true
      getDistribute().then(res => {
        this.retail = res
        this.retail.upgrade_standard = res.upgrade_standard + ''
        this.retail.appoint_type = res.appoint_type + ''
        if (res.total_commission) {
          this.form.domains = res.total_commission
        }
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>
  .fixed-bottom {
    position: absolute;
    bottom: 0;
    z-index: 10099;
    background: hsla(0,0%,100%,.95);
    padding: 10px;
    border-top: none;
    width: calc(100% - 20px);
    box-shadow: 0 -3px 5px #eee;
    text-align: center;
    background: #fff;
    left: 50%;
    transform: translateX(-50%);
  }
</style>
